<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>论坛热帖</title>
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header>
        <div class="head_c">
            <!--头部-->
            <div class="top">
                <div class="top_left">欢迎光临悠游行！</div>
                <div class="top_right" style="display: flex;" id="login_signup_area">
                    <div class="top_right"><a href="login.html">登录</a><a href="zhuce.html">注册</a>
                    </div>
                </div>
                <div class="top_right" style="display: flex;" id="logout_area">
                    <a class="top_right" id="login_info" style="font-weight: bold;">用户：15159241643</a>
                    <div class="top_right logout_button" onclick="logout()">退出登录</div>
                </div>
            </div>
        </div>
    </header>

    <!--导航-->
    <nav>
        <ul>
            <li><a href="index.html">网站首页</a></li>
            <li><a href="jingdian.html">著名景点</a></li>
            <li><a href="luxian.html">推荐路线</a></li>
            <li><a href="jiudian.html">酒店入住</a></li>
            <li class="on"><a href="luntan.html">论坛热帖</a></li>

        </ul>
    </nav>

    <!--banner-->
    <div class="banner"></div>
    <div class="luntan" style="height:900px;">
        <div class="jingdian_tittle">论坛热帖</div>
        <div class="luntan_list">
            <ul id="post_list">
            </ul>
            <div style="display: flex;justify-content: space-between;">
                <button style="margin: 0;" onclick="display_prev_page()">上一页</button><button style="margin: 0;"
                    onclick="display_next_page()">下一页</button>
            </div>
            <button onclick="jump_to_write_post()" style="margin: 30px 0;">撰写文章</button>
        </div>
    </div>

    <div class="modal-wrapper hidden" id="float_area">
        <div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float"></h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="float_area_close()">关闭</button>
        </div>
    </div>

    <div class="modal-wrapper float_window" id="float_window">
    </div>
</body>

</html>
<script src="./js/utils.js"></script>
<script>
    now_page = 1;
    display_login_info();
    display_now_page();
    function jump_to_write_post() {
        window.location.href = "luntan-pinglun.html";
    }
    function select_post(id) {
        setCookie("selected_post_id", id);
        window.location.href = "luntan-xq.html";
    }

    function delete_post_tip(id, name) {
        float_window(
            `<div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float">确认删除该文章【${name}】？</h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="delete_post(${id})">确认</button>
              <br>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="hide_float_window()">取消</button>
            </div>
      `
        );
    }

    async function delete_post(id) {
        api = baseUrl2 + `/post/delete?id=${id}`;
        await fetch(api, {
            method: "DELETE",
            headers: {
                Authorization: getCookieValue("token"),
            },
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                if (data["code"] == 200) {
                    hide_float_window();
                    display_now_page();
                    show_float_text("删除成功");
                } else {
                    show_float_text("删除失败");
                    hide_float_window();
                }
            }).catch(error => {
                console.error(error);
                hide_float_window();
            })
    }

    async function display_now_page() {
        api = baseUrl2 + `/post/get-post-page?pageNum=${now_page}&pageSize=6`;
        await fetch(api, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                list = data["data"];
                table = document.querySelector("#post_list");
                table.innerHTML = "";
                for (item of list) {
                    table.innerHTML += `
                    <li class="${isAdmin() ? "delete_button_parent" : ""}">
                    <button class="float_small_button" onclick="delete_post_tip(${item.id},'${item.title}')">删除</button>
                        <div onclick="select_post(${item.id})">
                            <p style="font-weight: bold; margin-left: -15px;">用户：${item.uid}</p>
                            <div style="margin-left: 40px;">
                                <a href="luntan-xq.html" style="font-weight: bold;"><span>${item.title}</span></a>
                                <p>${limited_string(item.content, 120)}</p>
                            </div>
                        </div>
                    </li>
                    `;
                }
                if (list.length === 0 && now_page > 1) {
                    display_prev_page();
                }
            }).catch(error => {
                console.error(error);
            })
    }
    function display_prev_page() {
        if (now_page > 1) now_page--;
        display_now_page();
    }
    function display_next_page() {
        now_page++;
        display_now_page();
    }
</script>